<template>
	<view id="page-line-details">
		
		<view class="box" v-if="detail">
			<uni-card 
				:title="detail.lineName"  
				>
				<view class="price">
					{{detail.price}}
				</view>
				<view class="">
					{{getLineSiteCount}}
				</view>
				<view class="">
					{{getLineTitle}}
				</view>
				<view class="">
					{{getRuntime}}
				</view>
				<button type="primary" plain="true" @click="onSwitch">切换</button>
			</uni-card>
			<uni-steps :options='getSites' :active="-1" direction="column"></uni-steps>
		</view>
		<view class="" v-else>
			路线详情没有
		</view>
	</view>
</template>

<script>
	import {
		uniSteps,
		uniCard
	} from '@dcloudio/uni-ui'
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers('lineDetails')
	export default {
		data() {
			return {
				value:0,
			};
		},
		components: {
			uniSteps,
			uniCard
		},
		methods:{
			...mapActions(['GET_LINE_DETAILS']),
			onSwitch(){
				if(this.value===0){
					this.value=1
				}else{
					this.value=0
				}
			}
		},
		computed:{
			...mapState(['detail']),
			getRuntime(){
				return this.detail.runtime.split(",")[this.value]
			},
			getLineTitle(){
				return this.detail.sitesLineList[this.value].lineTitle
			},
			getLineSiteCount(){
				return this.detail.sitesLineList[this.value].lineSiteCount
			},
			getSites(){
				if(this.detail==null) return []
				let data=[];
				this.detail.sitesLineList[this.value].lineSiteList.forEach((item,index)=>{
					data.push({
						title:item.lineSiteName,
						id:item.lineSiteId,
						// desc:item.lineSiteNum
					})
				})
				return data;
			}
		},
		onLoad() {
			this.GET_LINE_DETAILS()
				.then((res) => {
					console.log("成功")
				})
				.catch(() => {
					console.log('出错')
				})
		}
	}
</script>

<style lang="scss">
#page-line-details{
	width: 100%;
	min-height: 100%;
	padding: 20upx 0;
}
</style>
